<template>
    <div v-if="range" class="date-time-picker-range">
        <div v-if="onlyTime" :class="size">
            <ui-time-picker-component v-model="modelStartValue"
                :placeholder="startPlaceholder"
                @change="changeLeft"
                :format="defaultFormat"
                :max-date="modelEndValue"
                :disabled="disabled"
                :timeString="timeString"
                class="date-time-picker-start"
                :uneditable="uneditable"
                :size="size"></ui-time-picker-component>
            <div class="date-separate"></div>
            <ui-time-picker-component v-model="modelEndValue"
                @change="changeRight"
                :placeholder="endPlaceholder"
                :format="defaultFormat"
                :min-date="modelStartValue"
                :disabled="disabled"
                :timeString="timeString"
                class="date-time-picker-end"
                :uneditable="uneditable"
                :size="size"></ui-time-picker-component>
        </div>
        <div v-else :class="size">
            <ui-date-picker-component v-model="modelStartValue"
                :type="type"
                :placeholder="startPlaceholder"
                :format="defaultFormat"
                :max-date="modelEndValue"
                :disabled="disabled"
                :timeString="timeString"
                class="date-time-picker-start"
                :uneditable="uneditable"
                :size="size"></ui-date-picker-component>
            <div class="date-separate"></div>
            <ui-date-picker-component v-model="modelEndValue"
                :type="type"
                :placeholder="endPlaceholder"
                :format="defaultFormat"
                :min-date="modelStartValue"
                :disabled="disabled"
                :timeString="timeString"
                class="date-time-picker-end"
                :uneditable="uneditable"
                :size="size"></ui-date-picker-component>
        </div>
    </div>
    <div v-else class="date-time-picker">
        <div v-if="onlyTime">
            <ui-time-picker-component v-model="model"
                @change="change"
                :placeholder="placeholder"
                :format="defaultFormat"
                :min-date="minDate"
                :max-date="maxDate"
                :disabled="disabled"
                :timeString="timeString"
                :size="size"
                :uneditable="uneditable"
                :unclearable="unclearable"></ui-time-picker-component>
        </div>
        <div v-else>
            <ui-date-picker-component v-model="model"
                :type="type"
                :placeholder="placeholder"
                :format="defaultFormat"
                :min-date="minDate"
                :max-date="maxDate"
                :disabled="disabled"
                :timeString="timeString"
                :size="size"
                :uneditable="uneditable"
                :unclearable="unclearable"></ui-date-picker-component>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'ui-date-time-picker',
        props: {
            value: {},
            type: {},
            placeholder: {
                'default': '请选择'
            },
            startPlaceholder: {
              'default': '请选择开始时间'
            },
            endPlaceholder: {
              'default': '请选择结束时间'
            },
            minDate: {},
            maxDate: {},
            format: {},
            range:{
                type:Boolean,
                default:false
            },
            modelStart: {},
            modelEnd: {},
            disabled: {},
            onlyTime: {},
            size: String,
            timeString:'',
            uneditable: {
                type: Boolean,
                default: false
            },
            unclearable: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                model: this.value,
                modelStartValue: this.modelStart,
                modelEndValue: this.modelEnd,
                defaultFormat: ''
            }
        },
        mounted() {
            this.defaultFormat = this.format ? this.format : (this.type === 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : (this.onlyTime ? 'HH:mm:ss' : 'yyyy-MM-dd'))
        },
        watch: {
            model: function(val) {
                this.$emit('input', val)
            },
            modelStartValue: function(val) {
                this.$emit('update:modelStart', val)
            },
            modelEndValue: function(val) {
                this.$emit('update:modelEnd', val)
            },
            value: function(val) {
                this.model = this.value
            },
            modelStart: function(val) {
                this.modelStartValue = this.modelStart
            },
            modelEnd: function(val) {
                this.modelEndValue = this.modelEnd
            }
        },
        methods: {
            change(val) {
                this.$emit('change', val);
            },
            changeLeft(val) {
                this.$emit('changeLeft', val);
            },
            changeRight(val) {
                this.$emit('changeRight', val);
            }
        }
    }
</script>
<style lang="scss">
    .date-time-picker{
        display:inline-block;
        width:100%;
    }
    .date-time-picker-range{
        font-size:0;
        .date-time-picker-start{
            .el-input__inner{
                border-top-right-radius:0;
                border-bottom-right-radius:0;
            }
        }
        .date-time-picker-end{
            .el-input__inner{
                border-top-left-radius:0;
                border-bottom-left-radius:0;
            }
        }
        .date-separate{
            display:inline-block;
            width:20px;
            overflow:hidden;
            height:40px;
            line-height:40px;
            border:1px solid #bfcbd9;
            border-left:none;
            border-right:none;
            background:#F4F4F4;
            color:#929292;
            vertical-align:top;
            position:relative;
            text-align:center;
            &:after{
                content:"-";
                font-size:14px;
            }
        }
        .mini{
            .date-separate{
                height:28px;
                line-height:28px;
            }
        }
        .small{
            .date-separate{
                height:32px;
                line-height:32px;
            }
        }
    }
</style>
